<template>
  <div>
    <el-form
      ref="form"
      label-width="70px"
      :inline="true"
      class="login-container"
      :model="form"
      :rules="rules"
    >
      <h3 class="login_title"> 邮 箱 验 证 码 注 册 </h3>

      <el-form-item
        ref="email"
        label="邮箱"
        prop="email"
      >
        <el-input v-model="form.email" placeholder="请输入邮箱">
          <el-select placeholder="" />
        </el-input>
      </el-form-item>

      <el-form-item
        label="验证码"
        prop="VerificationCode"
      >
        <el-input v-model="form.code" placeholder="请输入验证码">
          <el-button slot="suffix" :disabled="disabled" @click="getCode">
            <span class="Time">{{ btnTxt }}</span>
          </el-button>
        </el-input>
      </el-form-item>
      <el-form-item
        ref="username"
        label="用户名"
        prop="username"
      >
        <el-input v-model="form.username" placeholder="请输入用户名">
          <el-select placeholder="" />
        </el-input>
      </el-form-item>
      <el-form-item
        ref="password"
        label="密码"
        prop="password"
      >
        <el-input v-model="form.password" type="password" placeholder="请输入密码">
          <el-select placeholder="请输入密码" />
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button class="login_button" type="primary" @click="submit">登 录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { registerSendCode } from '@/api/user'
import { isvalidUsername } from '@/utils/validate'

export default {
  name: 'Register',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能小于5位'))
      } else {
        callback()
      }
    }
    const validateEmail = (rule, value, callback) => {
      // console.log(rule)
      // console.log(value)
      // console.log(callback)
      // 判断输入框中是否输入邮箱
      if (!value) {
        callback(new Error('邮箱不能为空'))
      }
      // 正则表达式进行验证邮箱，从1开始，第二位是35789中的任意一位，以9数字结尾
      // ^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$
      // 邮箱格式校验
      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
        callback(new Error('邮箱格式不正确'))
      }
      // if (!/^1[35789]\d{9}$/.test(value)) {
      //   callback(new Error('邮箱格式不正确'))
      // }
      callback()
    }
    return {
      btnTxt: '获取验证码',
      // 是否禁用  即点击之后一段时间内无法再点击
      disabled: false,
      time: 0,
      form: {
        email: '',
        code: '',
        password: '',
        username: ''
      },
      rules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        email: [
          { required: true, trigger: 'blur', message: '请输入正确的邮箱' },
          { required: true, trigger: 'blur', min: 3, max: 80, message: '长度不符合' },
          { required: true, trigger: 'blur', validator: validateEmail }
        ],
        code: [
          { required: true, trigger: 'blur', message: '请输入4位验证码' },
          { required: true, trigger: 'blur', min: 6, max: 6, message: '验证码错误' }
        ],
        password: [{ required: true, trigger: 'blur', validator: validatePass }]
      }
    }
  },
  methods: {
    // 获取手机验证码方法
    getCode() {
      // 校验邮箱码
      if (!this.form.email) {
        // 号码校验不通过
        this.$message({
          message: '请输入邮箱',
          type: 'warning'
        })
        // 正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
        // if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
        //   callback(new Error('邮箱格式不正确'))
        // }
      } else if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.form.email)) {
        // 失去焦点后自动触发校验邮箱规则
      } else {
        this.time = 60
        this.disabled = true
        // 调用倒计时方法
        this.timer()
        // 封装的axios接口
        registerSendCode({
          email: this.form.email
        }).then(({ data }) => {
          if (data.code === 200) {
            this.$message({
              message: '验证成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '发送失败',
              type: 'warning'
            })
          }
        })
      }
    },
    // 倒计时方法
    timer() {
      if (this.time > 0) {
        this.time--
        // console.log(this.time)
        this.btnTxt = this.time + 's后重新获取验证码'
        setTimeout(this.timer, 1000)
      } else {
        this.time = 0
        this.btnTxt = '获取验证码'
        this.disabled = false
      }
    },
    // 提交按钮
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/register', this.form).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 450px;
  border: 1px solid #eaeaea;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;
  background-color: #ffffff;
  box-sizing: border-box;
}

.login-container /deep/ .el-input__inner {
  width: 120%;
  border: 0px;
  border-bottom: 1px solid;
}

.login-container .el-button {
  border: 0px;
  margin: -80px;
}

.login-container .el-button .span {
  margin-left: 50px;
}

.login-container .login_title {
  text-align: center;
  margin-bottom: 40px;
  color: #505458;
}

.login-container .el-input {
  width: 198px;
}

.login-container .login_button {
  margin-left: 105px;
  margin-top: 10px;
}

.login-container .time {
  width: 50px;
}
</style>
